<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind指令详解(他是一个负责动态绑定的指令)</title>
<!--安装vue-->
    <script src="js/vue.js"></script>
</head>
<body>

<!--准备一个容器-->
<div id="app">

    <!--
        v-bind指令详解
            1.这个指令是干啥的?
                它可以让HTML标签的某个属性值产生动态的效果
            2.v-bind指令的语法格式:
                <HTML 标签 v-bind:参数="表达式"></HTML>
            3.v-bind指令的编译原理
                编译前:
                    <HTML标签 v-bind:参数=“表达式”></HTML标签>
                编译后:
                    <HTML标签 参数=“表达式执行的结果”></HTML>
                注意两项:
                    第一：在编译的时候 v-bind后面的"参数名"会被编译为HTML标签的属性名
                    第二:表达式会关联data,当data发生变化之后,表达式的执行结果就会发生变化
                    所以：连带的就会产生动态效果
           4.v-bind因为很常用,所以Vue框架对该指令提供了一种简写的方式:
                只是针对 v-bind提供了以下的简写方式:
                <img :src="imgPath">
           5.什么时候使用插值语法?什么时候使用指令
                凡事标签体中的内容想要动态,需要使用插值语法
                只要是想让HTML的属性动态,需要使用指令语法
    -->

    <!--注意：以下代码中msg是变量名-->
    <!--注意：原则上v-bind指令后面的这个参数是可以随便写的-->
    <!--虽然可以随便写,但是在大部分的情况下,这个参数名还是需要写成html标签支持的属性名,这样才会有意义，浏览器才会识别-->
    <span v-bind:xyz="msg"></span><br/>

    <!--这个表达式带有单引号,这个'msg'就不是变量了,是常量-->
    <span v-bind:xyz="'msg'"></span><br/>
    
    <!--v-bind实战-->
    <img src="image/1.jpg" alt=""><br/>
    <!--v-bind:src="imgPath" 这种绑定写法是不需要 {{}}的-->
    <img v-bind:src="imgPath" alt=""><br/>

    <!--v-bind简写形式-->
    <img :src="imgPath" alt=""><br/>

    <!--这是一个普通的文本框-->
    <input type="text" name="username" value="zhangsan" /><br/>
    <input type="text" name="username" :value="username" /><br/>
    
    <!--使用v-bind也可以让超链接的地址动态-->
    <a href="https://www.baidu.com">走起</a><br/>
    <a :href="url">走起2</a><br/>

    <!--不能采用下面的写法吗-->
    <!--
        不能这样，报错了,信息如下
        Interpolation inside attributes has been removed.
         Use v-bind or the colon shorthand instead.
         For example, instead of <div id="{{ val }}">, use <div :id="val">
        属性内部插值这种语法已经被移除了.(可能Vue在以前的版本中是支持这种写法的,但是现在不允许了)
        请使用v-bind或者冒号速记来代替
        请使用 <div :id="val"> 来代替 <div id="{{val}}">
         <a href="{{url}}">走起3</a>
    -->

    <h1>{{msg}}</h1>

</div>


<script>
    //赋值的过程就可以看做是一种绑定的过程
    // let i = 100
    new Vue({
        el : '#app',
        data : {
            msg : 'Hello Vue',
            imgPath : 'image/1.jpg',
            username : 'jackson',
            url : 'https://www.baidu.com'
        }
    })

</script>

</body>
</html>